<script setup lang="ts">
import { ref } from "vue"
import identify from "./components/identify.vue"
import importData from "./components/importData.vue"
import creates from "./components/creates.vue"
import users from "./components/user.vue"
const loading = ref<boolean>(false)
const enterTimeStart = ref<string>("")
const enterTimeEnd = ref<string>("")
import dayjs from "dayjs"
const currentDate = dayjs()
// 2023-12-10 00:00:00
// enterTimeStart.value = "2024-06-13 00:00:00"
// enterTimeEnd.value = "2024-06-14 00:00:00"
enterTimeStart.value = currentDate.format("YYYY-MM-DD")
enterTimeEnd.value = currentDate.format("YYYY-MM-DD")
// enterTimeEnd.value = currentDate.add(1, "day").format("YYYY-MM-DD")
const customDateTimeFormat = ref<string>("YYYY-MM-DD")
const handleEnterChange = (value: string) => {
  console.log(value)
  console.log(enterTimeStart.value)
  //选择完时间，让下面的内容刷新
}
const handleOutChange = (value: string) => {
  console.log(value)
  console.log(enterTimeEnd.value)
}
</script>

<template>
  <div class="app-container">
    <el-card v-loading="loading" shadow="hover" class="search-wrapper">
      <template #header>
        <div class="card-header">
          <span>今日</span>
          <div class="header-right">
            <div>
              <el-date-picker
                v-model="enterTimeStart"
                :format="customDateTimeFormat"
                :value-format="customDateTimeFormat"
                type="date"
                placeholder="请选择"
                size="small"
                style="width: 148px"
                @change="handleEnterChange"
              />
            </div>
            <div style="margin: 0 8px">---</div>
            <div>
              <el-date-picker
                v-model="enterTimeEnd"
                :format="customDateTimeFormat"
                :value-format="customDateTimeFormat"
                type="date"
                placeholder="请选择"
                size="small"
                style="width: 148px"
                @change="handleOutChange"
              />
            </div>
          </div>
        </div>
      </template>
      <div class="sourceTitle">
        <div class="sourceTitleBox">
          <h4>入库：</h4>
          <import-data :enter-time-start="enterTimeStart" :enter-time-end="enterTimeEnd" />
        </div>
        <div class="sourceTitleBox">
          <h4>库存：</h4>
          <identify />
        </div>
        <div class="sourceTitleBox">
          <h4>出库：</h4>
          <creates :enter-time-start="enterTimeStart" :enter-time-end="enterTimeEnd" />
        </div>
      </div>
    </el-card>
    <el-card v-loading="loading" shadow="hover" class="search-wrapper">
      <template #header>
        <div class="card-header">
          <span>今日</span>
          <div class="header-right">
            <div>
              <el-date-picker
                v-model="enterTimeStart"
                :format="customDateTimeFormat"
                :value-format="customDateTimeFormat"
                type="date"
                placeholder="请选择"
                size="small"
                style="width: 148px"
                @change="handleEnterChange"
              />
            </div>
            <div style="margin: 0 8px">---</div>
            <div>
              <el-date-picker
                v-model="enterTimeEnd"
                :format="customDateTimeFormat"
                :value-format="customDateTimeFormat"
                type="date"
                placeholder="请选择"
                size="small"
                style="width: 148px"
                @change="handleOutChange"
              />
            </div>
          </div>
        </div>
      </template>
      <div>
        <div>
          <h4>出库：</h4>
          <users :enter-time-start="enterTimeStart" :enter-time-end="enterTimeEnd" />
        </div>
      </div>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  .header-right {
    display: flex;
    align-items: center;
  }
}
.search-wrapper {
  margin-bottom: 20px;
  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}
.sourceTitle {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.sourceTitleBox {
  width: calc(30% - 10px);
}
</style>
